<nz-divider></nz-divider>
<nz-breadcrumb>
  <nz-breadcrumb-item>
    <a [routerLink]="['/']">
      <i nz-icon nzType="home"></i>
      <span>{{ 'menu.dashboard' | i18n }}</span>
    </a>
  </nz-breadcrumb-item>
  <nz-breadcrumb-item>
    <i nz-icon nzType="code"></i>
    <span>{{ 'menu.extras.define' | i18n }}</span>
    <a href="https://hertzbeat.com/docs/advanced/extend-point" target="_blank" style="float: right; margin-right: 5%">
      <button nz-button nzType="primary">
        <span>{{ 'common.button.help' | i18n }} </span>
        <span nz-icon nzType="question-circle"></span>
      </button>
    </a>
  </nz-breadcrumb-item>
</nz-breadcrumb>
<nz-divider></nz-divider>

<nz-layout style="min-height: 100vh">
  <nz-sider style="height: 100%; overflow: auto; margin: 4px" [nzTrigger]="null">
    <ul nz-menu nzTheme="light" nzMode="inline" nzInlineCollapsed="false">
      <li nz-submenu [nzTitle]="'menu.monitor.service' | i18n">
        <ul>
          <li nz-menu-item *ngFor="let app of appMenus['service']; let i = index" (click)="loadAppDefineContent(app)">{{ app.label }}</li>
        </ul>
      </li>
      <li nz-submenu [nzTitle]="'menu.monitor.db' | i18n">
        <ul>
          <li nz-menu-item *ngFor="let app of appMenus['db']; let i = index" (click)="loadAppDefineContent(app)">{{ app.label }}</li>
        </ul>
      </li>
      <li nz-submenu [nzTitle]="'menu.monitor.os' | i18n">
        <ul>
          <li nz-menu-item *ngFor="let app of appMenus['os']; let i = index" (click)="loadAppDefineContent(app)">{{ app.label }}</li>
        </ul>
      </li>
      <li nz-submenu [nzTitle]="'menu.monitor.mid' | i18n">
        <ul>
          <li nz-menu-item *ngFor="let app of appMenus['mid']; let i = index" (click)="loadAppDefineContent(app)">{{ app.label }}</li>
        </ul>
      </li>
      <li nz-submenu [nzTitle]="'menu.monitor.cn' | i18n">
        <ul>
          <li nz-menu-item *ngFor="let app of appMenus['cn']; let i = index" (click)="loadAppDefineContent(app)">{{ app.label }}</li>
        </ul>
      </li>
      <li nz-submenu [nzTitle]="'menu.monitor.network' | i18n">
        <ul>
          <li nz-menu-item *ngFor="let app of appMenus['network']; let i = index" (click)="loadAppDefineContent(app)">{{ app.label }}</li>
        </ul>
      </li>
      <li nz-submenu [nzTitle]="'menu.monitor.custom' | i18n">
        <ul>
          <li nz-menu-item *ngFor="let app of appMenus['custom']; let i = index" (click)="loadAppDefineContent(app)">{{ app.label }}</li>
        </ul>
      </li>
    </ul>
  </nz-sider>
  <nz-layout>
    <nz-content>
      <div style="margin: 10px 10px 4px 10px">
        <button nzGhost *ngIf="currentApp != null" nz-button nzType="primary">
          <i nz-icon nzType="file-text" nzTheme="outline"></i>
          {{ 'app-' + currentApp?.value + '.yml' }}
        </button>
        <button *ngIf="code != originalCode" nz-button nzType="primary" [nzLoading]="saveLoading" (click)="onSaveAndApply()">
          <i nz-icon nzType="save" nzTheme="outline"></i>
          {{ 'define.save-apply' | i18n }}
        </button>
        <button *ngIf="currentApp != null" nz-button nzType="primary" (click)="onNewMonitorDefine()">
          <i nz-icon nzType="save" nzTheme="outline"></i>
          {{ 'define.new' | i18n }}
        </button>
        <button *ngIf="currentApp != null" nz-button nzDanger nzType="primary" (click)="onDeleteDefineYml()">
          <i nz-icon nzType="delete" nzTheme="outline"></i>
          {{ 'define.delete' | i18n }}
        </button>

        <nz-switch
          style="margin-right: 25px; float: right"
          [ngModel]="dark"
          (ngModelChange)="onDarkModeChange($event)"
          [nzUnCheckedChildren]="unchecked"
          [nzCheckedChildren]="checked"
        ></nz-switch>
        <ng-template #unchecked>
          <span nz-icon nzType="bulb"></span>
        </ng-template>
        <ng-template #checked>
          <span nz-icon nzType="poweroff"></span>
        </ng-template>
      </div>
      <div style="margin: 4px 10px 4px 4px; height: 100%; width: 100%">
        <nz-code-editor
          class="editor"
          [nzLoading]="loading"
          [nzOriginalText]="originalCode"
          [(ngModel)]="code"
          [nzEditorMode]="'diff'"
          [nzEditorOption]="{ language: 'yaml', theme: 'vs-dark', folding: true }"
        ></nz-code-editor>
      </div>
    </nz-content>
  </nz-layout>
</nz-layout>
